三角形

三角形生成器；三角箭头

纯 css 画三角形与 border 属性相关

上三角

width: 0;
height: 0;
border: 100px solid transparent;
border-bottom: 100px solid #3498db;
border-width: 0 100px 100px 100px;

下三角

width: 0;
height: 0;
border: 100px solid transparent;
border-top: 100px solid #e74c3c;
border-width: 100px 100px 0 100px;

左三角

width: 0;
height: 0;
border: 100px solid transparent;
border-right: 100px solid #2ecc71;
border-width: 100px 100px 100px 0;

右三角

width: 0;
height: 0;
border: 100px solid transparent;
border-left: 100px solid #f1c40f;
border-width: 100px 0 100px 100px;

怎么设置？

设置四边 border 的属性

width: 100px;
height: 100px;
border-top: 100px solid #e74c3c;
border-right: 100px solid #2ecc71;
border-bottom: 100px solid #3498db;
border-left: 100px solid #f1c40f;

设置 width 和 height 为 0

width: 0;
height: 0;
border-top: 100px solid #e74c3c;
border-right: 100px solid #2ecc71;
border-bottom: 100px solid #3498db;
border-left: 100px solid #f1c40f;

设置区域三个 border 颜色为透明

width: 0;
height: 0;
border: 100px solid transparent;
border-top: 100px solid #e74c3c;

虽然当前显示为三角形，但实际占用的空间还是矩形

设置对立面 width 为 0

width: 0;
height: 0;
border: 100px solid transparent;
border-top: 100px solid #e74c3c;
border-width:100px 100px 0 100px;

总结

可以看到三角形方向是与 border 属性 top bottom left right 方向相反的